• 前言
• 跟着教程学习
  • 基础文件配置
  • 压缩之terser
  • 导入JSON
• 拓展配置
  • 配置react
  • 启环境测试
  • 安装依赖
  • 启环境测试

前言

我之前写过的一个功能想打包到我的个人项目里展示, 因为里面用了很多antd和styled-component, 而个人项目 用的tailwind, 对css-in-js不是很友好, 而且也不想集成antd, 干脆把这个功能单独打成npm包, 学习一下打npm package.

写本文时rollup版本为4.18.0, 不知道rollup会不会和webpack一样, 每次升个大版本变化很大.

跟着教程学习

根据官方教程, 以下这点东西就能跑.

基础文件配置

文件结构:

├── package.json
├── rollup.config.mjs
├── src
│   └── main.js

文件内分别包括, 开发时候可以一直开着watch模式.

// main.js
export default function () {
  console.log(123)
}

// rollup.config.mjs
export default {
	input: 'src/main.js',
	output: {
		file: 'bundle.js',
		format: 'cjs'
	}
}

// package.json
"devDependencies": {
  "rollup": "^4.18.0",
},
"scripts": {
  "watch": "rollup --config --watch",
  "build": "rollup --config"
}

dist/bundle.js的result:

'use strict';

function main () {
  console.log(123);
}

module.exports = main;

压缩之terser

@rollup/plugin-terser, 简单来说就是制造*.min.js. 添加看下结果

yarn add -D @rollup/plugin-terser

// rollup.config.mjs
export default {
	input: 'src/main.tsx',
	output: [{
		file: 'dist/bundle.js',
		format: 'cjs'
	}, {
		file: 'dist/bundle.min.js',
		format: 'iife',
		name: 'version',
		plugins: [terser()]
	}
}

结果:

导入JSON

@rollup/plugin-json, 顾名思义, 可以导入json文件.

npm install --save-dev @rollup/plugin-terser

更新config

export default {
	input: 'src/main.js',
	output: [{
		file: 'dist/bundle.js',
		format: 'cjs'
	}, {
		file: 'dist/bundle.min.js',
		format: 'iife',
		name: 'version',
		plugins: [terser()]
	}],
	plugins: [
		json()
	]
};

结果:

简略版教程差不多就这点东西, 下面根据我的实际需求, 拓展些别的.

拓展配置

我想要开发的是react组件, 所以需要添加对react, ts等一些必要配置.

配置react

yarn add -D @babel/core @babel/preset-react @rollup/plugin-babel
yarn add -P react@">=16.0.0" react-dom">=16.0.0"

我们并不需要在我的package中编译打包react和react-dom, 所以不用放在devDependencies,

也不希望在安装我这个包的时候再安装一个特定的react(dependencies), 而是希望直接用主程序自己的react, 所以需要将他们安装为peerDependencies.

至于兼容性, 大于16版本都可以.

启环境测试

"scripts": {
  "watch": "rollup --config --watch",
}

在任意已经启动的React前端项目中:

import TextComponent from '${绝对路径}/dist/bundle.min.js'

安装依赖

yarn add -D @babel/core @babel/preset-react @rollup/plugin-babel
yarn add -D react react-dom

启环境测试

"scripts": {
  "watch": "rollup --config --watch",
}

在任意已经启动的React前端项目中:

import TextComponent from '${绝对路径}/dist/bundle.min.js'